<style type="text/css">
#ar{
    position:absolute;
    top:5px;
    right:0px;
    border:6px inset #b0b5bd;
    text-align:center;
    color:#000066;
    background-color:#d0d6df;
    cursor:move;
    height:50px;
    width:340px;
}
</style>
<div id="ar"></div>
<br><br>
<?php echo CYui::init(true, true); ?>
<h2>Tabview Demo</h2>
<br><br>
       <?php echo CHtml::beginForm(); $ajax = CYui::buildAjaxOptions('/widget/ajaxcall', 'ar');?>
        <?php echo CYui::tabview($id1, $tabs1, $activeTab1, $orientation1); ?>
        <br><br>
        <?php echo CYui::tabview($id2, $tabs2, $activeTab2, $orientation2, $ajax); ?>
    <br><br>
    <div class="yiiForm">
    <div class="action">
        <?php echo CHtml::submitButton('Post active page to server'); ?>
    </div>
    </div><!-- yiiForm -->
    <?php echo CHtml::endForm(); ?>
<br><br>
<table class="dataGrid">
    <tr>
        <th colspan="4"><h3>tabview</h3></th>
    </tr>
    <tr>
        <th>Param</th>
        <th>Type</th>
        <th>Description</th>
        <th>Required / default</th>
    </tr>
    <tr>
        <td><b>$id</b></td>
        <td>string</td>
        <td>DOM id</td>
        <td align="center">+</td>
    </tr>
    <tr>
        <td><b>$tabs</b></td>
        <td>array</td>
        <td><?php echo CHtml::link('full params list on Yahoo! UI Library', 'http://developer.yahoo.com/yui/tabview/#tabconfigref'); ?></td>
        <td align="center">+</td>
    </tr>
    <tr>
        <td><b>$activeTab</b></td>
        <td>integer</td>
        <td>active tab number</td>
        <td align="center">0 (first tab)</td>
    </tr>
    <tr>
        <td><b>$orientation</b></td>
        <td>string</td>
        <td>"top", "bottom", "left", "right"</td>
        <td align="center">`top`</td>
    </tr>
    <tr>
        <td><b>$ajax</b></td>
        <td>array</td>
        <td>ajax call when select new value for widget</td>
        <td align="center">NULL</td>
    </tr>
    <tr>
        <td colspan="4">
            <?php echo CYui::codeHighlight('$tabs1 = array(
            CYui::tabviewContentTab(`tab content here ...`, `Simple text`),
            CYui::tabviewDivTab(`htmlDivName`, `DIV content`),
            CYui::tabviewAjaxTab(`/widget/calendarpartial`, `Calendar view`, true),
        );

echo CYui::tabview(`tabMenu`, $tabs, 1);', 'php'); ?>
        </td>
    </tr>
    <tr>
        <th colspan="4"><h3>tabviewContentTab</h3></th>
    </tr>
    <tr>
        <td><b>$content</b></td>
        <td>string</td>
        <td>Tab content</td>
        <td align="center">+</td>
    </tr>
    <tr>
        <td><b>$label</b></td>
        <td>string</td>
        <td>Tab caption</td>
        <td align="center">+</td>
    </tr>
    <tr>
        <td><b>$disabled</b></td>
        <td>boolean</td>
        <td>If set, Tab cannot be activated.</td>
        <td align="center">false</td>
    </tr>
    <tr>
        <th colspan="4"><h3>tabviewDivTab</h3></th>
    </tr>
    <tr>
        <td><b>$div</b></td>
        <td>string</td>
        <td>The element that contains the Tab's content.</td>
        <td align="center">+</td>
    </tr>
    <tr>
        <td><b>$label</b></td>
        <td>string</td>
        <td>Tab caption</td>
        <td align="center">+</td>
    </tr>
    <tr>
        <td><b>$disabled</b></td>
        <td>boolean</td>
        <td>If set, Tab cannot be activated.</td>
        <td align="center">false</td>
    </tr>
    <tr>
        <th colspan="4"><h3>tabviewAjaxTab</h3></th>
    </tr>
    <tr>
        <td><b>$url</b></td>
        <td>string</td>
        <td>Tab data is loaded dynamically from this url when tab is activated.</td>
        <td align="center">+</td>
    </tr>
    <tr>
        <td><b>$label</b></td>
        <td>string</td>
        <td>Tab caption</td>
        <td align="center">+</td>
    </tr>
    <tr>
        <td><b>$cacheData</b></td>
        <td>boolean</td>
        <td>Whether or not Tab data should be cached when data is being loaded dynamically.</td>
        <td align="center">true</td>
    </tr>
    <tr>
        <td><b>$dataTimeout</b></td>
        <td>int</td>
        <td>Number of milliseconds to wait before aborting connection.</td>
        <td align="center">null</td>
    </tr>
    <tr>
        <td><b>$loadMethod</b></td>
        <td>int</td>
        <td>The method to use for the data request.</td>
        <td align="center">`GET`</td>
    </tr>
    <tr>
        <td><b>$disabled</b></td>
        <td>boolean</td>
        <td>If set, Tab cannot be activated.</td>
        <td align="center">false</td>
    </tr>

</table>